<template>
  <s-layout class="set-wrap" title="门店" navbar="" :bgStyle="{ color: '#f7f7f7' }" tabbar="/pages/yy/store">
    <!-- #ifdef APP-PLUS -->
    <view class="h-[2.75rem]"></view>
    <!-- #endif -->
    <view class="flex flex-col gap-4 p-4">
      <view class="flex gap-3 items-center">
        <view class="text-[1.125rem] text-[#382B2B] flex-none font-bold">联盟店</view>
        <view class="rounded-full bg-[#FFFFFF] p-1 flex-1 pl-4 flex items-center justify-between gap-4">
          <input placeholder="请输入关键字" class="text-[13px] text-[#8B88AB] flex-1 h-full" v-model="state.keyword" />

          <!-- <uni-easyinput v-model="state.keyword" type="text" placeholder="请输入关键字" :inputBorder="false" @input="clearContet" /> -->
          <view class="rounded-full bg-[#0788C8] h-full px-4 py-1" @click="typeList">
            <view class="text-[1rem] text-[#FFFFFF]"> 搜索 </view>
          </view>
        </view>
      </view>

      <view class="flex flex-col">
        <view class="h-[9.375rem] bg-[#F7F7F7] rounded-lg overflow-hidden" @click="enteringTheStore">
          <image :src="state.config?.store_banner" class="size-full" mode="aspectFill" />
        </view>
        <u-tabs :list="state.tabList" :scrollable="true" v-model="state.active" @change="handleChange"></u-tabs>
      </view>
      <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无列表" icon="/static/collect-empty.png" />
      <view class="grid grid-cols-2 gap-4" v-if="state.list">
        <view v-for="(i, k) in state.list" class="flex overflow-hidden flex-col col-span-1 bg-white rounded-lg" :key="k" @click="toDetail(i)">
          <view class="aspect-square w-full bg-gray-200">
            <image :src="i.image" mode="aspectFill" class="size-full" />
          </view>
          <view class="flex flex-col gap-1 p-2">
            <view class="flex justify-between items-center">
              <view class="text-[#111] line-clamp-1 text-[.875rem]">{{ i.name }}</view>
              <view class="flex gap-1 items-center">
                <image src="/static/20250826231916.png" mode="aspectFill" class="size-3" />
                <view class="text-[1rem] text-[#FF1632]">{{ i.score }} </view>
              </view>
            </view>
            <view class="text-[#777] text-[.75rem] line-clamp-1">{{ i.brief }}</view>
            <view class="flex gap-1 items-center mt-1">
              <image src="/static/20250826232207.png" mode="aspectFill" class="size-3" />
              <view class="text-[.75rem] text-[#068DCA] line-clamp-1"> {{ i.address }} </view>
            </view>
            <!-- <view class="flex gap-1 items-center">
              <image src="/static/20250826232215.png" mode="aspectFill" class="size-3" />
              <view class="text-[.75rem] text-[#068DCA]"> {{ i.mobile }} </view>
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <uni-load-more status="noMore" v-if="state.list.length"></uni-load-more>
    <!-- <view class="py-5"></view>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center">
        <view class="font-medium text-[1rem] text-[#FFFFFF]"> 确认修改 </view>
      </view>
    </view> -->
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    active: 0,
    tabList: [],
    keyword: '',
    list: [],
    loading: true,
    config: {},
    id: 0,
    page: 1,
  });

  onLoad(() => {
    typeList();
    config();
  });
  onReachBottom(() => {
    if (state.value.list.length === 0) {
      return;
    }
    state.value.page++;
    storeList();
  });
  onPullDownRefresh(() => {
    state.value.page = 1;
    state.value.list = [];
    storeList();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  });
  // 门店列表
  function storeList() {
    state.value.loading = true;
    sheep.$api.yy
      .storeList({
        type_id: state.value.id,
        page: state.value.page,
        keyword: state.value.keyword,
      })
      .then((res) => {
        if (res.code === 1) {
          // /res.data.data
          state.value.list = [...state.value.list, ...res.data.data];
        }
      })
      .finally(() => {
        state.value.loading = false;
      });
  }
  // 门店分类
  function typeList() {
    sheep.$api.yy.typeList().then((res) => {
      if (res.code === 1) {
        state.value.tabList = res.data;
        state.value.id = res.data[0].id;
        storeList();
      }
    });
  }
  // 配置
  function config() {
    sheep.$api.yy.config().then((res) => {
      if (res.code === 1) {
        state.value.config = res.data;
        //store_banner
      }
    });
  }
  // 切换分类
  function handleChange(item) {
    console.log('🚀 ~ handleChange ~ item:', item);
    // console.log('🚀 ~ handleChange ~ index:', index);
    // console.log('state.value.tabList==> ', state.value.tabList[index].id);
    // state.value.active = index;
    state.value.id = item.id;
    state.value.list = [];
    state.value.page = 1;
    storeList();
  }
  // 搜索
  function clearContet(e) {
    // 当输入框为空时重置搜索
    if (!e?.trim()) {
      state.value.keyword = '';
      storeList();
    }
  }
  // 入驻门店
  function enteringTheStore() {
    // uni.navigateTo({
    //   url: '/pages/yy/enteringTheStore',
    // });

    // pages/yy/enteringTheStore

    // applyShow

    sheep.$api.yy
      .storeShow()
      .then((res) => {
        // 状态:0=待审核,1=审核成功,2=审核失败  1  和2   就不跳转

        // 状态:0=待审核,1=审核成功,2=审核失败
        if (res.data.status === 1) {
          uni.showToast({
            title: '您已是入驻门店',
            icon: 'none',
          });
          return;
        }

        if (res.data.status === 0) {
          uni.showToast({
            title: '您的申请正在审核中',
            icon: 'none',
          });
          return;
        }
        uni.navigateTo({
          url: '/pages/yy/enteringTheStore',
        });
      })
      .catch(() => {
        uni.navigateTo({
          url: '/pages/yy/enteringTheStore',
        });
      });
  }
  //
  function toDetail(i) {
    uni.navigateTo({
      url: '/pages/yy/storeIntroduction?id=' + i.id,
    });
  }
</script>

<style lang="scss" scoped></style>
